import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Table } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './DevDetail.less';
import { timeZoneDir, gpsStatus, scrSwitch, brightMode } from '../../utils/city';

@connect(({ devInfo, loading }) => ({
  devInfo,
  loading: loading.models.devInfo,
}))
export default class DevDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    const { dispatch } = this.props;
    const { devId } = this.props.match.params;
    dispatch({
      type: 'devInfo/fetch',
      payload: { devId },
    });
    dispatch({
      type: 'devInfo/fetchBasicInfo',
      payload: { devId },
    });
  }
  onFresh = () => {
    const { dispatch } = this.props;
    const { devId } = this.props.match.params;
    dispatch({
      type: 'devInfo/fetch',
      payload: { devId },
    });
  };

  render() {
    const columns = [
      {
        dataIndex: 'key',
        key: 'key',
      },
      {
        dataIndex: 'value',
        key: 'value',
      },
    ];
    const { devInfo } = this.props;
    const record = devInfo.devInfo;
    const record1 = devInfo.devBasicInfo;
    // const dataSource = Object.keys(record).map(item=>{ return {key:item,value:record[item]}})
    const dataSource = [
      { key: '设备ID', value: record.devId },
      { key: '设备名', value: record.devName },
      { key: '分辨率', value: record.resolution },
      { key: '时区', value: `${timeZoneDir[record.timeZoneDir]}${record.timeZoneValue}时区` },
      { key: 'fpga版本', value: record.fpga },
      { key: '固件版本', value: record.version },
      { key: '内核版本', value: record.kernel },
      { key: '剩余空间', value: record.space },
      { key: 'SIM卡号', value: record1.simIccid },
      { key: 'SIM卡序列号', value: record1.simMsisdn },
      { key: '车牌号', value: record1.vehLicplateNumber },
      { key: '主班司机', value: record1.mainDriver },
      { key: '主班司机上岗证号', value: record1.mdWorklicNumber },
      { key: '主班司机电话号码', value: record1.mdTelephoneNumber },
      { key: '副班司机', value: record1.viceDriver },
      { key: '副班司机上岗证号', value: record1.vdWorklicNumber },
      { key: '副班司机电话号码', value: record1.vdTelephoneNumber },
      { key: '车队名称', value: record1.vehGroup },
      { key: '公司名称', value: record1.compName },
      { key: '所属城市', value: record1.city },
    ];
    const stateSource = [
      { key: '屏内温度', value: `${record.temperature}℃` },
      { key: '板卡温度', value: `${record.boardTemperature}℃` },
      { key: '湿度', value: `${record.humidity}%` },
      { key: '屏幕开关', value: scrSwitch[record.scrSwitch] },
      { key: '当前亮度值', value: record.brightness },
      { key: '亮度调节模式', value: brightMode[record.brightMode] },
      { key: '心跳间隔', value: record.interval },
      { key: '最后上线时间', value: record.lastOnTime },
      { key: '最后离线时间', value: record.lastOffTime },
    ];
    const netSource = [
      { key: 'gps状态', value: gpsStatus[record.gpsStatus] },
      { key: '经度', value: record.longi },
      { key: '纬度', value: record.lati },
      { key: '速度', value: `${record.speed}Km/h` },
      { key: '入网方式', value: record.module },
      { key: '信号强度', value: `${record.signal}dBm` },
      { key: '激活状态', value: record.status },
    ];
    //console.log('dataSource'.dataSource);
    return (
      <PageHeaderLayout>
        <Row gutter={24}>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card title="基本信息" className={styles.card}>
              <Table
                dataSource={dataSource}
                columns={columns}
                showHeader={false}
                pagination={false}
                size="middle"
                bordered={false}
              />
            </Card>
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card title="设备状态" className={styles.card}>
              <Table
                dataSource={stateSource}
                columns={columns}
                showHeader={false}
                pagination={false}
                size="middle"
                bordered={false}
              />
            </Card>
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card title="网络信息" className={styles.card}>
              <Table
                dataSource={netSource}
                columns={columns}
                showHeader={false}
                pagination={false}
                size="middle"
                bordered={false}
              />
            </Card>
          </Col>
        </Row>
      </PageHeaderLayout>
    );
  }
}
